<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

</head>
<body>
<br>
<div class="form-group">
    <label for="str">输入要转换的内容：</label>
    <textarea class="form-control" id="str"></textarea>
    <!--<p class="help-block">这里是块级帮助文本的实例。</p>-->
</div>
<br>
<div class="form-group">
    <button id="encode-btn" class="btn btn-info">Base64编码</button>
    <button id="decode-btn" class="btn">Base64解码</button>
</div>
<br>
<div class="form-group">
    <label for="txt">转换后的结果为：</label>
    <textarea class="form-control" id="txt"></textarea>
    <!--<p class="help-block">这里是块级帮助文本的实例。</p>-->
</div>
<script>
    $("#encode-btn").click(function(){
        $("#txt").val($("#str").val());
        $.post(
            "http://blog.jvm123.com/base64/encode",
            {
                "s": $("#str").val()
            },
            function(data){
                $("#txt").val(data.body);
            }
        );
    });
    $("#decode-btn").click(function(){
        $("#txt").val($("#str").val());
        $.post(
            "http://blog.jvm123.com/base64/decode",
            {
                "s": $("#str").val()
            },
            function(data){
                $("#txt").val(data.body);
            }
        );
    });
</script>
</body>
</html>
